<template>
  <div class="indexContainer">
    <div class="header">
      <img src="../../static/images/logo.png" alt="" />
      <van-search
        shape="round"
        class="searchInput"
        placeholder="搜索商品"
        @click="tosearch"
      ></van-search>
      <van-button v-if="show" plain type="danger" size="small" @click="tologin"
        >登录</van-button
      >
      <van-button v-else disabled plain type="danger" size="small" @click="tologin"
        >登录</van-button
      >
    </div>

    <van-tabs
      class="tabs"
      v-model="active"
      @click="onClick(categoryHotSellModule)"
    >
      <van-tab class="tab" title="推荐">
        <van-swipe class="my-swipe" :autoplay="3000">
          <van-swipe-item v-for="item in focusList" :key="item.id">
            <img :src="item.picUrl" />
          </van-swipe-item>
        </van-swipe>

        <van-row class="policyDescList" type="flex" justify="space-around">
          <van-col
            class="policyDescItem"
            span="6"
            v-for="(item, index) in policyDescList"
            :key="index"
          >
            <img :src="item.icon" alt="" />
            <span>{{ item.desc }}</span>
          </van-col>
        </van-row>

        <div class="kingKongModule">
          <div
            class="kingKongItem"
            v-for="(kingKongItem, index) in kingKongList"
            :key="index"
          >
            <img :src="kingKongItem.picUrl" />
            <span>{{ kingKongItem.text }}</span>
          </div>
        </div>

        <van-swipe
          class="bigpicture"
          v-for="(item, index) in floorList"
          :key="index"
        >
          <img
            :src="item1.picUrl"
            alt=""
            v-for="(item1, index) in item.cells"
            :key="index"
          />
        </van-swipe>

        <div class="paihang">{{ categoryHotSellModule.title }}</div>
        <van-grid
          class="grid"
          :column-num="2"
          :gutter="25"
          direction="horizontal"
          icon-size="230px"
          border
        >
          <van-grid-item
            :text="item.categoryName"
            :icon="item.picUrl"
            v-for="(item, index) in category1List"
            :key="index"
          >
          </van-grid-item>
        </van-grid>
        <div></div>
        <van-grid
          class="grid"
          :column-num="4"
          :gutter="25"
          direction="vertical"
          icon-size="100px"
          border
        >
          <van-grid-item
            :text="item.categoryName"
            :icon="item.picUrl"
            v-for="(item, index) in category2List"
            :key="index"
          >
          </van-grid-item>
        </van-grid>

        <div class="gridfooter">
          <van-grid :column-num="2" gutter="20px">
            <van-grid-item
              v-for="(item, index) in sceneLightShoppingGuideModule"
              :key="index"
            >
              <div>
                <span>{{ item.styleItem.title }}</span>
              </div>
              <div>
                <span>{{ item.styleItem.desc }}</span>
              </div>
              <van-grid
                :column-num="2"
                direction="vertical"
                icon-size="130px"
                :border="false"
                :gutter="10"
              >
                <van-grid-item
                  v-for="(item, index) in item.styleItem.picUrlList"
                  :key="index"
                  :icon="item"
                />
              </van-grid>
            </van-grid-item>
          </van-grid>
        </div>

        <div class="footer">
          <div class="button">
            <button>下载APP</button>
            <button>电脑版</button>
          </div>
        </div>
      </van-tab>

      <van-tab
        class="qita"
        :title="item.categoryName"
        v-for="(item, index) in categoryHotSellModule.categoryList"
        :key="index"
      >
        <van-swipe class="my-swipe" :autoplay="3000">
          <van-swipe-item
            v-for="(item, index) in currentCategory.bannerList"
            :key="index"
          >
            <img :src="item.picUrl" alt="" />
          </van-swipe-item>
        </van-swipe>

        <div v-for="(item, index) in categoryItemList" :key="index">
          <div class="top">
            <h3>{{ item.category.name }}</h3>
            <p>{{ item.category.frontName }}</p>
          </div>
          <van-row class="vanrow" justify="space-around" gutter="20">
            <van-col
              style="margin-bottom: 10px"
              span="12"
              class="vancol"
              v-for="(itlist, index1) in item.itemList"
              @click="todetail(index, index1)"
              :key="itlist.id"
            >
              <div class="listContainer" style="margin-bottom: 10px">
                <div class="listItem">
                  <img :src="itlist.listPicUrl" alt="" />
                  <p>{{ itlist.name }}</p>
                  <span>{{
                    itlist.finalPriceInfoVO.priceInfo.finalPrice
                      ? itlist.finalPriceInfoVO.priceInfo.finalPrice.prefix
                      : ""
                  }}</span>
                  <span style="color: red; font-weight: bold"
                    >{{
                      itlist.finalPriceInfoVO.priceInfo.finalPrice ? "￥" : ""
                    }}<span class="da">{{
                      itlist.finalPriceInfoVO.priceInfo.finalPrice
                        ? itlist.finalPriceInfoVO.priceInfo.finalPrice.price
                        : ""
                    }}</span>
                    <del
                      style="color: #999999"
                      v-if="itlist.finalPriceInfoVO.priceInfo.finalPrice"
                      >￥{{
                        itlist.finalPriceInfoVO.priceInfo
                          ? itlist.finalPriceInfoVO.priceInfo.counterPrice
                          : ""
                      }}</del
                    >
                    <span v-else style="color: red; font-weight: bold"
                      >￥{{
                        itlist.finalPriceInfoVO.priceInfo
                          ? itlist.finalPriceInfoVO.priceInfo.counterPrice
                          : ""
                      }}</span
                    >
                  </span>
                </div>
                <span
                  style="font-size: 25px; margin-right: 10px; color: #fa1e32"
                  >{{
                    itlist.finalPriceInfoVO.banner
                      ? itlist.finalPriceInfoVO.banner.title
                      : ""
                  }}</span
                >
                <span style="font-size: 25px; color: red">{{
                  itlist.finalPriceInfoVO.banner
                    ? itlist.finalPriceInfoVO.banner.content
                    : ""
                }}</span>
              </div>
            </van-col>
          </van-row>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { readToken } from "@/utils/auth";
import { reqrecommendList, reqitemList } from "@/api";
//let result = await reqrecommendList(value)
//let result = await reqitemList(timestamp, categoryId)
import { mapGetters, mapState } from "vuex";
export default {
  name: "Home",
  data() {
    return {
      show: true,
      active: 0,
      active1: 0,
      categoryIdList: [],
      currentCategory: {},
      categoryItemList: [],
      categoryList: [],
      categoryHotSellModule: {},
      category1List: [],
      category2List: [],
      focusList: [
        {
          cells: [],
        },
      ],
      policyDescList: [],
      kingKongList: [],
      floorList: [],
      indexActivityModule: [],
      sceneLightShoppingGuideModule: [],
      searchInfo: {
        img: "",
        title: "",
        price: "",
      },
    };
  },
  mounted() {
    this.getremmonedList();
    // 判断需不需要展示登录按钮
    let token = readToken();
    if (token) {
      this.show = false;
    }
  },
  methods: {
    async getremmonedList() {
      let result = await reqrecommendList(1630131808529);
      let item = result.data.data;
      if (result.code == 200) {
        this.categoryHotSellModule = item.categoryHotSellModule;
        this.category1List = item.categoryHotSellModule.categoryList.slice(
          0,
          2
        );
        this.category2List = item.categoryHotSellModule.categoryList.slice(2);
        this.focusList = item.focusList;
        this.policyDescList = item.policyDescList;
        this.kingKongList = item.kingKongModule.kingKongList;
        // this.floorList = item.bigPromotionModule.floorList;
        this.indexActivityModule = item.indexActivityModule;
        this.sceneLightShoppingGuideModule = item.sceneLightShoppingGuideModule;
      }
    },
    async onClick(item) {
      // console.log(this.active);
      let result = item.categoryList.map((item1) => {
        return item1.extra;
      });
      let result2 = result.map((item) => {
        return item.operationResource.categoryId;
      });
      this.categoryIdList = result2;
      result2.unshift("1005002");
      try {
        let result = await reqitemList(1630136511866, result2[this.active * 1]);
        this.currentCategory = result.data.currentCategory;
        this.categoryItemList = result.data.categoryItemList;
        this.categoryList = result.data.categoryList;
      } catch (error) {
        alert(error);
      }

      // this.$store.dispatch("getItemList", {
      //   timestamp: 1630136511866,
      //   categoryId: result2[this.active * 1],
      // });
    },
    tosearch() {
      this.$router.push({ path: "/search" });
    },
    todetail(id, index) {
      let result = this.categoryItemList[id].itemList[index];
      // console.log(result)
      let info = {
        img: result.listPicUrl,
        title: result.name,
        price: result.retailPrice,
      };
      this.searchInfo = info;
      this.$router.push({
        path: "/detail",
        query: { info },
      });
    },
    tologin() {
      // 跳转到登录
      this.$router.push("/login");

      // let token = readToken()
      // if(token){
      //   this.show = true
      // }else{
      //   this.$router.push({path:'/login'})
      // }
    },
  },
};
</script>

<style lang="less" scoped>
.indexContainer {
  .header {
    display: flex;
    padding: 8px 15px;
    img {
      width: 67px;
      height: 20px;
    }
    .searchInput {
      height: 28px;
    }
  }
  .tabs {
    .tab {
      .my-swipe .van-swipe-item {
        img {
          width: 100%;
          height: 150px;
        }
      }
      .policyDescList {
        display: flex;
        .policyDescItem {
          flex: 1;
          text-align: center;
          img {
            width: 20px;
            height: 20px;
            vertical-align: middle;
          }
          span {
            font-size: 12px;
            vertical-align: middle;
          }
        }
      }
      .kingKongModule {
        display: flex;
        flex-wrap: wrap;
        margin: 20px 0;
        .kingKongItem {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 20%;
          img {
            width: 50px;
            height: 50px;
          }
          span {
            margin: 2px 0 5px 0;
            font-size: 10px;
            line-height: 10px;
          }
        }
      }
      .bigpicture {
        width: 100%;
        img {
          width: 380px;
        }
      }
      .paihang {
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        padding: 10px;
        margin-bottom: 10px;
        box-sizing: border-box;
      }
      .grid {
        margin-bottom: 5px;
        .griditem {
          background-color: rgb(191, 60, 60);
        }
      }
      .gridfooter {
        padding: 5px;
        div {
          span {
            font-size: 15px;
          }
        }
      }
      .footer {
        width: 100%;
        height: 110px;
        background-color: #333;
        margin: 0 auto;
        .button {
          box-sizing: border-box;
          margin-top: 10px;
          height: 60px;
          line-height: 30px;
          text-align: center;
          button {
            margin-top: 10px;
            margin-left: 20px;
            text-align: center;
            vertical-align: middle;
            font-size: 15px;
            border: 1px solid #fff;
            color: #fff;
            background-color: #333;
          }
        }
      }
    }
    .qita {
      .my-swipe .van-swipe-item {
        img {
          width: 100%;
          height: 150px;
        }
      }
      .top {
        margin-top: 15px;
        text-align: center;
        // height: 50px;
        h3 {
          line-height: 14px;
          font-size: 14px;
          margin: 2px;
          font-weight: normal;
        }
        p {
          line-height: 10px;
          font-size: 12px;
          color: #999;
        }
      }
      .vanrow {
        width: 100%;
        height: 100%;
        padding-left: 10px;
        margin-bottom: 5px;
        box-sizing: border-box;
        .listContainer {
          box-sizing: border-box;
          .listItem {
            img {
              width: 170px;
              height: 170px;
            }
            p {
              display: block;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
}
</style>
